<!--
 * @Date: 2023-08-11 17:49:45
 * @LastEditors: 景冰川 961166897@qq.com
 * @LastEditTime: 2023-08-21 17:18:37
 * @FilePath: \veteran-cadre-app\src\components\mine\user-nav.vue
-->
<script setup lang="ts">
import integralIcon from '~/static/images/mine/integral-icon.png'
import financeIcon from '~/static/images/mine/finance-icon.png'
import trajectoryIcon from '~/static/images/mine/trajectory-icon.png'
import { useAppStore } from '@/stores/app-store'

const appStore = useAppStore()
const popup = ref(null)
const list = [
  {
    icon: integralIcon,
    text: '积分商城',
    path: '/pages-sub/user/points-mall',
  },
  {
    icon: financeIcon,
    text: '助老金融',
    path: '/pages-sub/bank/index',
  },
  {
    icon: trajectoryIcon,
    text: '轨迹定位',
    path: '',
  },
]
function onnav(e) {
  if (appStore.onClickDis() !== 3)
    return
  if (e.path)
    router.push(e.path)
  else popup.value.open()
}
</script>

<template>
  <div
    class="pt-116rpx mx-32rpx rounded-16rpx flex overflow-hidden justify-between"
  >
    <div v-for="e in list" :key="e.text" class="box" @click="onnav(e)">
      <image :src="e.icon" class="img" mode="scaleToFill" />
      <div class="text">
        {{ e.text }}
      </div>
    </div>
  </div>
  <dev-load ref="popup" />
</template>

<style lang="scss" scoped>
.box {
  position: relative;
  width: 216rpx;
  height: 139rpx;
  border-radius: 25rpx;
  font-size: 34rpx;
  color: white;
  font-weight: 800;
  line-height: 128rpx;
  text-align: center;
  overflow: hidden;
  &:nth-child(1) {
    background: linear-gradient(to bottom, #2e8b57 0%, #40b473 100%);
  }
  &:nth-child(2) {
    background: linear-gradient(to bottom, #61bc84 0%, #73cf97 100%);
  }
  &:nth-child(3) {
    background: linear-gradient(to bottom, #9ed39e 0%, #abdcab 100%);
  }
}

.img {
  display: block;
  width: 98rpx;
  height: 130rpx;
  position: absolute;
  left: -36rpx;
  overflow: hidden;
}
</style>
